<template>
	<view>
		<u-form
			labelPosition="left"
			labelWidth="70"
			:model="business"
			:rules="rules"
			ref="profile"
		>
			<!-- 邮箱认证 -->
			<view class="user">
				<view class="avatar">
				<!-- #ifdef H5 || APP-PLUS -->
				<image v-if="business.avatar_text" :src="business.avatar_text"></image>
				<image v-else src="/static/logo.png"></image>
				<!-- #endif -->
	
				<!-- #ifdef MP-WEIXIN -->
					<image v-if="business.avatar_text" :src="business.avatar_text"></image>
					<open-data v-else type="userAvatarUrl"></open-data>	
				<!-- #endif -->
			</view>
			
				<view class="nickname">{{business.nickname}}</view>
			</view>
		
			<!-- 表单 -->
			<view class="profile">

				<!-- 邮箱 -->
				<u-form-item
					label="邮箱"
					prop="email"
					borderBottom
					ref="email"
				>
					<u-input v-model="business.email" border="none" placeholder="请输入邮箱" readonly></u-input>
				</u-form-item>

				<!-- 验证码 -->
				<u-form-item
					label="验证码"
					prop="code"
					borderBottom
					ref="code"
				>
					<u-input v-model="code" border="none" placeholder="请输入验证码"></u-input>

					<u-button slot="right" type="primary" :loadingText="btn.text" class="getcode" :disabled="btn.disabled" :loading="btn.loading" @click="send">{{ btn.msg }}</u-button>
					
				</u-form-item>
				

				<u-button type="primary" text="提交" formType="submit" @click="submit"></u-button>
			</view>
		</u-form>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
	
	export default {
		onReady() 
		{
			//onReady 为uni-app支持的生命周期之一
			//设置表单验证规则
			this.$refs.profile.setRules(this.rules)
		},
		onLoad()
		{
			this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

			this.avatar = [{
				url: this.business.avatar_text
			}]
		},
		data()
		{
			return {
				business: {
					email: '',
				},
				btn: {
					msg: '发送验证码',
					disabled: false,
					loading: false,
					text: '邮件正在发送中...' 
				},
				code: '',
				avatar: [],
				rules:{
					email: [
						{
							type: 'string',
							required: true,
							message: '请填写邮箱',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.email(value);
							},
							message: '邮箱不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
				}
			}
		},
		methods:{
			// 发送邮箱验证码
			async send(){
				this.btn.loading = true
				this.btn.disabled = true

				var data = {
					id: this.business.id,
					action: 'send'
				}

				// 发送验证码
				var result = await uni.$u.http.post('/business/email',data)

				if(result.code == 0){
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false
				}

				this.btn.msg = 60
				this.btn.loading = false

				var autoplay = () => {
					if(this.btn.msg <= 0){
						// 倒计时结束
						this.btn.msg = '重新发送验证码'
						this.btn.disabled = false
						clearInterval(T)
					}else{
						this.btn.msg--
					}
        		}
        		var T = setInterval(autoplay,1000)
			},

			// 提交表单
			submit()
			{
				// 判断是否有表单通过验证
				this.$refs.profile.validate()
				.then(async res => {
					// 组装数据
					var data = {
						params: {
							id: this.business.id,
							email: this.business.email,
							code: this.code
						},
					}
					// console.log(data.params);
					// return false
					var result = await uni.$u.http.post('business/email',data.params)

					if(result.code == 0){
						this.$refs.notice.show({
							type: 'error',
							message: result.msg
						})
						return false
					}

					this.$refs.notice.show({
						type: 'success',
						message: result.msg,
						complete: () => {
							// 更新本地存储
							uni.setStorageSync('business',result.data)

							// 返回
							uni.$u.route({
								type: 'navigateBack',
								delta: 1
							})
						}
					})
				}).catch(error => {
					console.log(error);
					this.$refs.notice.show({
						type: 'error',
						message: '校验失败'
					})
				})
			}
		}
	}
</script>

<style>
	/* 用户信息 */
	.user {
		width: 100%;
		padding:40rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(rgb(1,115,222), rgb(78,169,245));
		color:white;
	}

	.avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar image{
		width:100%;
		height:100%;
	}

	/* 表单 */
	.profile{
		width:90%;
		margin:0 auto;
	}

</style>